<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta charset="UTF-8"></meta>
    <#include "include/common.html">
        </head>
<body>
<div class="header" id="header">签到</div>
<div class="frame-main-sigin">
    <div class="sigin-btn">
        <a href="javascript:;" class="btn btn-big <#if signInInfo.haveSignInToday>btn-dis</#if>" id="doSignIn"
        <#if signInInfo.haveSignInToday>haveSignInType=true
            <#else>haveSignInType=false
        </#if>
        >点击签到</a>
    </div>
    <div class="list-view">
        <ul id="data-list">

        </ul>
    </div>
</div>
<div class="footer">
    <ul>
        <li class="active"><a href="${absolutePath}/mobile/sign_in">签到</a></li>
        <li><a href="${absolutePath}/mobile/mobile_spitslot_post.action"></a></li>
        <li><a href="${absolutePath}/mobile/mobile_spitslot">吐槽</a></li>
    </ul>
</div>
</body>
<script type="text/javascript">
    ulewo.url = {
        doSignIn: "../doSignIn.action", loadCurDaySignIn: "../loadCurDaySigin"
    }
    $(function () {
        var frame_main_height = $(window).height() - $(".header").outerHeight() - $(".footer").outerHeight() - $(".sigin-btn").outerHeight();
        $(".list-view").css({"top": (50 + $(".sigin-btn").outerHeight()) + "px", "height": frame_main_height + "px"});


        $("#doSignIn").click(function () {
            var haveSignInType = $(this).attr("haveSignInType");
            if (haveSignInType == "true") {
                return;
            }
            if (ulewo.user.userId == "") {
                ulewo.goLogin();
                return;
            }
            var _this = $(this);
            ulewo.ajaxRequest({
                async: true, url: ulewo.url.doSignIn, fun: function (res) {
                    _this.addClass("btn-dis");
                    _this.attr("haveSignInType", "true");
                    _this.text("已签到");
                    var msg = "2积分已到碗里";
                    if (res.data.continueSigIn) {
                        msg = "连续7天签到10积分已到碗里";
                    }
                    ulewo.tipMsg({
                        type: "success", content: msg, timeout: 3000
                    });

                    if ($(".data-list li.no-data").length == 1) {
                        $("#data-list").empty();
                        new SignInItem(res.data).appendTo($("#data-list"));
                    } else {
                        $("#data-list li").eq(0).before(new SignInItem(res.data));
                    }
                }
            });
        });


        $(document).on("click", ".load-more", function () {
            loadTodaySignIn(ulewo.pageNo + 1);
        });

        loadTodaySignIn(1);
    });

    function loadTodaySignIn(page) {
        ulewo.pageNo = page;
        ulewo.ajaxRequest({
            async: true, url: ulewo.url.loadCurDaySignIn, data: {
                pageNo: page
            }, fun: function (res) {
                $(".load-more").remove();
                var list = res.data.list;
                if (list.length == 0) {
                    $("<li class='no-data'>今天还没有人签到</li>").appendTo($("#data-list"));
                }
                var simplePage = res.data.page;
                for (var i = 0, _len = list.length, d; i < _len, d = list[i]; i++) {
                    new SignInItem(d).appendTo($("#data-list"));
                }

                if (simplePage.pageTotal > page) {
                    $("<li class='load-more'><a href='javascript:;' class'load-more'>⇓加载更多</a></li>").appendTo($("#data-list"));
                }
            }
        });
    }

    function SignInItem(data) {
        var li = $("<li></li>");
        $('<span class="user-avatar"><img src="' + ulewo.imageDomain + "upload/" + data.userIcon + '"></span>').appendTo(li);
        $('<span class="center">' + data.userName + '</span>').appendTo(li);
        $('<span class="right">' + data.signTime + '</span>').appendTo(li);
        return li;
    }
</script>
</html>
